<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ridin Mobile</title>
<meta name="description" content="">
<meta name="author" content="">

<style>
	body {
		/* padding-top: 60px; */
		/* 60px to make the container go all the way to the bottom of the topbar */
	}
</style>

<!-- CSS IMPORT -->
<link href="css/bootstrap.css" rel="stylesheet">

</head>

<body>

<div class="preloader">
	<img src="img/ajax-loader.gif" />
</div>

	<script type="text/javascript" src="lib/jquery.js"></script>
	<script type="text/javascript" src="lib/underscore.js"></script>
	<script type="text/javascript" src="lib/handlebars-1.0.0.beta.6.js"></script>
	<script type="text/javascript" src="lib/backbone.js"></script>
	<script type="text/javascript" src="lib/backbone-relational.js"></script>
	<script type="text/javascript" src="lib/backbone.localStorage.js"></script>
	<script type="text/javascript" src="lib/bootstrap-dropdown.js"></script> 

	<script src="js/utils.js"></script>

	<!-- VIEWS -->
	
	<script src="js/views/tablet.js"></script>
	
	<script src="js/views/application.js"></script>
	<script src="js/views/header.js"></script>
	<script src="js/views/dashboard.js"></script>
	<script src="js/views/edossier.js"></script>
	<script src="js/views/widgets/widget-list.js"></script>
	<script src="js/views/footer.js"></script>
	<script src="js/views/components/breadcrumb.js"></script>
	
	<!-- MODELS -->
	<script src="js/models/party.js"></script>
	<script src="js/models/deed.js"></script>
	<script src="js/models/edossier.js"></script>
	<script src="js/models/breadcrumb.js"></script>
	
	<!-- MOCK -->
	<script src="js/infrastructure/inmemorystore.js"></script>

	<!-- ENTRY POINT OF THE APPLICATION -->
	<script src="js/main.js"></script>
	
	<script type="text/javascript">
	
	/**
	 * Position the spinning preloader in the center of the screen
	 * Cannot be done with css solely (e.g. resize window event etc.)
	 */
	
		$(window).resize(function(){
	
			$('.preloader').css({
				position:'absolute',
				left: ($(window).width() - $('.className').outerWidth())/2,
				top: ($(window).height() - $('.className').outerHeight())/2
			});
	
		});
	
		// To initially run the function:
		$(window).resize();
	
	</script>
	
	<script type="text/template" id="list-item">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

</body>
</html>